<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>2.32节,动态删除下拉选项</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2>动态删除下拉选项</h2>
<input type="button" value='删除' id='removeOptions' data-target='removeOptios' />
<select id="removeOption">
    <option value="">请选择</option>
    <option value="1">原有选项</option>
    <option value="2">原有选项</option>
    <option value="3">原有选项</option>
    <option value="4">原有选项</option>
    <option value="5">原有选项</option>
    <option value="6">原有选项</option>
</select>
<script type="text/javascript">
    window.onload = function(){
        var _removeOptions = document.getElementById("removeOptions"),//获取元素对象
                removeOptions = function(target, optons){//删除option
                    var ol = optons.length,
                            i = 0;
                    for(; i < ol ; i++ ){
                        target.options[i] && target.options.remove(target.options[i]);//如果存在option对象，则调用remove删除
                    }
                };
        _removeOptions.onclick = function(){//绑定事件，执行删除
            removeOptions(document.getElementById("removeOption"), [1, 2])
        }
    };
</script>
</body>
</html>